<div class="blocks four">
  <div class="icon-form-field">
      <mat-icon color="primary">translate</mat-icon>
      <mat-form-field>
        <mat-label>{{'PAC.MENU.GENERAL.LANGUAGE' | translate: {Default: "Language"} }}</mat-label>
        <mat-select [placeholder]="'PAC.MENU.GENERAL.LANGUAGE_PLACEHOLDER' | translate: {Default: 'Select Language'} "
                    [ngModel]="preferredLanguage$ | async"
                    (selectionChange)="onLanguageSelect($event)"
                    name="language">
          <ng-container  *ngFor="let l of languages">
            <!-- ngFor hack of missing ngLet of Angular -->
            <mat-option *ngFor="let title of ['PAC.SETTINGS.GENERAL.LANGUAGE.' + l.value | translate: {Default: l.label} ]"
              [value]="l.value"
              [title]="title !== l.label
                ? title
                : ''">
              {{ l.label }}
            </mat-option>
          </ng-container>
        </mat-select>
      </mat-form-field>
    </div>
  <div class="icon-form-field">
    <mat-icon color="primary">color_lens</mat-icon>
    <mat-form-field>
      <mat-label>{{'PAC.MENU.GENERAL.THEME' | translate: {Default: "Theme"} }}</mat-label>
      <mat-select [ngModel]="preferredTheme$()"
                  (selectionChange)="onThemeSelect($event)"
                  name="theme">
        <ng-container  *ngFor="let l of themes">
          <!-- ngFor hack of missing ngLet of Angular -->
          <mat-option
            [value]="l.value"
            [title]="l.label">
            {{ l.label }}
          </mat-option>
        </ng-container>
      </mat-select>
    </mat-form-field>
  </div>
</div>